<template>
  <div>
    <div class="handle-box">
      <el-date-picker class="mr10" v-model="query.time" type="date" range-separator="-" value-format="yyyy-MM-dd" placeholder="选择日期">
      </el-date-picker>
      <el-button class="mr10" type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
      <el-button type="success" icon="el-icon-refresh" @click="souClick">刷新</el-button>
    </div>
    <el-row>
      <el-col :span="24">
        <!-- 当日 -->
        <div id="telTimeTelNum" style="height:300px"></div>
      </el-col>
      <el-col :span="12">
        <!-- 当日总 -->
        <div id="telNumber" style="height:300px"></div>
      </el-col>
      <el-col :span="12">
        <!-- 本周总 -->
        <div id="weektelNumber" style="height:300px"></div>
      </el-col>
      <el-col :span="24">
        <!-- 本月总 -->
        <div id="monthtelNumber" style="height:600px"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getTeltimedetails, getTeltime } from '../../../../api/index';

export default {
  data() {
    return {
      query: {
        time: "",
      },
      MList: [],
    };
  },
  props: ['activeId', 'time'],
  created() {
    this.query.time = this.time;
    this.getData();
    this.getDayData();
  },
  methods: {
    //获取整月列表数据
    getData() {
      this.tableLoad = true;
      getTeltimedetails({
        day: this.query.time ? this.query.time : this.getDate(),
        userId: this.activeId
      }).then((res) => {
        this.tableLoad = false;
        if (res.code === 0) {
          this.MList = res.list;
          this.monthtelNumberInit();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //获取每日数据详情
    getDayData() {
      getTeltime({
        day: this.query.time ? this.query.time : this.getDate(),
        userId: this.activeId
      }).then((res) => {
        if (res.code === 0) {
          // this.MList = res.list;
          if (res.recordList.length > 0) {
            for (var i in res.recordList[0]) {
              if (i.indexOf("time") > -1 || i.indexOf("Time") > -1) {
                res.recordList[0][i] = Math.floor(res.recordList[0][i] / 60);
              }
            };
            this.telTimeTelNumInit(res.recordList[0]);
            this.telNumberInit(res.recordList[0]);
            this.weektelNumberInit(res.recordList[0]);
          }
        } else {
          this.$message(res.msg);
        }
      });
    },
    //搜索
    souClick() {
      this.getData();
      this.getDayData();
    },
    //时分秒字符串转换成分钟
    convertTimeToMinutes(timeString) {
      var cleanedTimeString = timeString.replace(/\s/g, '').replace('秒', '');
      var match = cleanedTimeString.match(/(\d+)时(\d+)分/);
      if (match) {
        var hours = parseInt(match[1]);
        var minutes = parseInt(match[2]);
        var totalMinutes = hours * 60 + minutes;
        return totalMinutes;
      } else {
        return null;
      }
    },
    //初始化当日柱状图
    telTimeTelNumInit(item) {
      var chartDom = document.getElementById('telTimeTelNum');
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '当日通时通次',
          left: 'center'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '通话次数', '通话分钟'],
            ['9 ~ 10点', item.num1, item.time1],
            ['10 ~ 11点', item.num2, item.time2],
            ['11 ~ 12点', item.num3, item.time3],
            ['12 ~ 13点', item.num4, item.time4],
            ['13 ~ 14点', item.num5, item.time5],
            ['14 ~ 15点', item.num6, item.time6],
            ['15 ~ 16点', item.num7, item.time7],
            ['16 ~ 17点', item.num8, item.time8],
            ['17 ~ 18点', item.num9, item.time9],
            ['18 ~ 19点', item.num10, item.time10],
            ['19点以后', item.num11, item.time11],
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              fontSize: 14,
              position: 'top',
              formatter: '通次 : {@通话次数}'
            }
          },
          {
            type: 'bar',
            label: {
              show: true,
              fontSize: 14,
              position: 'top',
              formatter: '通时 : {@通话分钟}'
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //初始化当日总数扇形图
    telNumberInit(item) {
      var chartDom = document.getElementById('telNumber');
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '当日总通时通次',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              {
                value: item.dayNum,
                name: '通话次数',
                label: {
                  show: true,
                  formatter: '{b} : {@通话时长} 次'
                }
              },
              {
                value: item.dayTime,
                name: '通话分钟',
                label: {
                  show: true,
                  formatter: '{b} : {@通话时长} 分钟'
                }
              }
            ],

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //初始化本周总数扇形图
    weektelNumberInit(item) {
      var chartDom = document.getElementById('weektelNumber');
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '本周总通时通次',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              {
                value: item.weekNum,
                name: '通话次数',
                label: {
                  show: true,
                  formatter: '{b} : {@通话时长} 次'
                }
              },
              {
                value: item.weekTime,
                name: '通话分钟',
                label: {
                  show: true,
                  formatter: '{b} : {@通话时长} 分钟'
                }
              }
            ],

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //初始化本月总数扇形图
    monthtelNumberInit() {
      var chartDom = document.getElementById('monthtelNumber');
      var myChart = this.$echarts.init(chartDom);
      var option;
      const cellSize = [80, 80];
      const pieRadius = 30;
      var that = this;
      var startTime = that.query.time.split('-')[0] + '-' + that.query.time.split('-')[1] + '-01';
      if (that.query.time.split('-')[1] == 12) {
        var endTime = Number(that.query.time.split('-')[0]) + 1 + '-01-01';
      } else {
        var endTime = `${that.query.time.split('-')[0]}-${Number(that.query.time.split('-')[1]) + 1 < 10 ? '0' + (Number(that.query.time.split('-')[1]) + 1) : Number(that.query.time.split('-')[1]) + 1}-01`
      }
      function getVirtualData() {
        const date = +that.$echarts.time.parse(startTime);
        const end = +that.$echarts.time.parse(endTime);
        const dayTime = 3600 * 24 * 1000;
        const data = [];
        for (let time = date; time < end; time += dayTime) {
          data.push([
            that.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false), '.'
          ]);
        }
        return data;
      }
      const scatterData = getVirtualData();
      const pieSeries = scatterData.map(function(item, index) {
        var num = 0;
        var time = 0;
        for (var i = 0; i < that.MList.length; i++) {
          if (that.MList[i].day == item[0].split('-')[2]) {
            num = that.MList[i].count;
            time = Math.floor(that.MList[i].duration / 60);
            break;
          }
        }
        return {
          type: 'pie',
          id: 'pie-' + index,
          center: item[0],
          radius: pieRadius,
          coordinateSystem: 'calendar',
          label: {
            formatter: '{c}',
            position: 'inside'
          },
          data: [
            { name: '通话次数', value: num },
            { name: '通话分钟', value: time }
          ]
        };
      });
      option = {
        title: {
          text: '本月通时通次',
          left: 'center'
        },
        tooltip: {},
        legend: {
          data: ['通话次数', '通话分钟'],
          bottom: 20
        },
        calendar: {
          top: 'middle',
          left: 'center',
          orient: 'vertical',
          cellSize: cellSize,
          yearLabel: {
            show: false,
            fontSize: 30
          },
          dayLabel: {
            margin: 20,
            firstDay: 1,
            nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          monthLabel: {
            show: false
          },
          range: [that.query.time.split('-')[0] + '-' + that.query.time.split('-')[1]]
        },
        series: [
          {
            id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 0,
            label: {
              show: true,
              formatter: function(params) {
                return that.$echarts.time.format(params.value[0], '{dd}', false);
              },
              offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
              fontSize: 14
            },
            data: scatterData
          },
          ...pieSeries
        ]
      };
      option && myChart.setOption(option);
    }
  },
  mounted() {

  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
</style>
